<template>
  <el-select v-model="netType" clearable filterable style="width: 350px;" @change="handleChange">
    <el-option
      v-for="state in netTypeList"
      :key="state.value"
      :value="state.value"
      :label="state.label"
    />
  </el-select>
</template>

<script>
  import { NetAccessTypeMap } from './consts'

  export default {
    name: 'SelectNetType',
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: { type: String, require: false, default: '' }
    },
    data() {
      return {
        netType: '',
        netTypeList: []
      }
    },
    watch: {
      value() {
        this.deviceState = this.value
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        for (const type in NetAccessTypeMap) {
          this.netTypeList.push({
            value: type,
            label: NetAccessTypeMap[type]
          })
        }
      },
      handleChange(value) {
        this.$emit('change', value)
      }
    }
  }
</script>

<style scoped></style>
